<template>
		<view class="">
			<!--顶部标签-->
			<u-tabs :list="list2" class="tabs1" lineWidth="30" @change="tabsChange"></u-tabs>
			<!--私信-->
			<div style="overflow: hidden;" v-if="privateLetter">
				<div class="div1" @click="getChat(item.friend_id,item.notation)" v-for="(item,index) in friendList" :key="index" :data-index="index">
					<!--头像-->
					<u-avatar :src="item.file_path" size="50" class="image"></u-avatar>
					<div class="div2">
						<div class="div3">
							<!--联系人名称-->
							<p class="p1">{{item.notation}}</p>
							<!--最后一条消息-->
							<p class="p2">{{item.last_message}}</p>
						</div>
						<div class="div4">
							<!--最后消息时间-->
							<p class="p3">{{timeShowFormat(item.update_time)}}</p>
							<!--未读数-->
							<u-badge class="div5" :type="'error'" max="99" :value="item.unread"></u-badge>
						</div>
					</div>
				</div>
			</div>
			<!--通知消息-->
			<div style="overflow: hidden;" v-if="notice">
				<div class="div1">
					<!--头像-->
					<u-avatar src="https://a.svner.cn/12.jpg" size="50" class="image"></u-avatar>
					<div class="div2">
						<div class="div3">
							<!--联系人名称-->
							<p class="p1">系统消息</p>
							<!--最后一条消息-->
							<p class="p2">您的评论因违反社区管理条例被系统屏蔽</p>
						</div>
						<div class="div4">
							<!--最后消息时间-->
							<p class="p3">18-09-25 21:00</p>
						</div>
					</div>
				</div>
			</div>
			<!--新增关注-->
			<div style="overflow: hidden;">
				<div class="div1" v-if="concerns" v-for="(item,index) in followUserList" :key="index" :data-index="index">
					<!--头像-->
					<u-avatar :src="item.file_path" size="50" class="image"></u-avatar>
					<div class="div2">
						<div class="div3">
							<!--联系人名称-->
							<p class="p1">{{item.user_name}}</p>
							<!--警告-->
							<p class="p2">开始关注你了</p>
						</div>
						<div class="div4">
							<!--最后消息时间-->
							<p class="p3">{{timeShowFormat(item.create_time)}}</p>
						</div>
					</div>
				</div>
			</div>
			<!--与我相关-->
			<div style="overflow: hidden;" v-if="relevant">
				<div class="div1">
					<!--头像-->
					<u-avatar src="https://a.svner.cn/12.jpg" size="50" class="image"></u-avatar>
					<div class="div2">
						<div class="div3">
							<!--联系人名称-->
							<p class="p1">系统消息</p>
							<!--最后一条消息-->
							<p class="p2">开始关注你了</p>
						</div>
						<div class="div4">
							<!--最后消息时间-->
							<p class="p3">18-09-25 21:00</p>
						</div>
					</div>
				</div>
			</div>
		</view>
</template>

<script>
	import timeUtil from '@/util/timeUtil.js';
    export default {
        data() {
            return {
				myId: 0, //用户id
				friendList: [], //用户联系列表
				followUserList: [], //关注用户列表
                list2: [{
                    name: '私信'
                }, {
                    name: '通知消息'
                }, {
                    name: '新增关注'
                }, {
                    name: '与我相关'
                }], // 顶部标签
				privateLetter: true, //私信内容
				notice: false, // 通知消息
				concerns: false, // 新增关注
				relevant: false // 与我相关
			}
        },
		// 挂载
		mounted () {
			// 获取myId
			this.myId = uni.getStorageSync('administrator').userId
			// 查询联系人
			this.queryFriendList();
			// 清空未读数
			this.emptyUnRead();
			// 查询关注用户
			this.getFollowUserListById();
		},
		methods: {
			//监听Tabs切换
		   tabsChange (data) {
				if(data.index == 0){
					this.privateLetter = true
					this.notice = false
					this.concerns = false
					this.relevant = false
				}
				if(data.index == 1){
					this.privateLetter = false
					this.notice = true
					this.concerns = false
					this.relevant = false
				}
				if(data.index == 2){
					this.privateLetter = false
					this.notice = false
					this.concerns = true
					this.relevant = false
				}
				if(data.index == 3){
					this.privateLetter = false
					this.notice = false
					this.concerns = false
					this.relevant = true
				}
			},
			// 跳转聊天页面
			getChat (friend_id,notation) {
				uni.navigateTo({
					url: '/pages/hot/chat?id='+ friend_id+'&notation='+notation+'&myId='+this.myId
				})
				// this.emptyUnRead()
				// 刷新页面
				window.location.reload();
			},
			// 查询关注用户
			getFollowUserListById () {
				uni.request({
					url: "http://localhost:8090/news/followUser/getFollowUserListById",                  
					method: 'get',
					dataType: 'json',
					data: {
						userId : this.myId
					},
					success: (res) => {
						console.log(res.data);
						this.followUserList = res.data.object
						console.log(this.friendList);
					},
				});
			},
			// 查询联系人
			queryFriendList () {
				uni.request({
					url: "http://localhost:8090/news/friend/getFriendMapperList",                  
					method: 'get',
					dataType: 'json',
					data: {
						myId : this.myId
					},
					success: (res) => {
						console.log(res.data);
						this.friendList = res.data.object
						console.log(this.friendList);
					},
				});
			},
			//清空未读数
			emptyUnRead () {
				uni.request({
					url: 'http://localhost:8090/news/friend/emptyUnRead',
					method: 'get',
					dataType: 'json',
					data:{
						myId: this.myId,
						friendId: this.friendId
					},
					success: (res) => {
						if (res.data.flag) {
							console.log(res.data.object)
						} else {
							console.log(res.data.object)
						}
					}
				})
			},
			// 转换时间
			timeShowFormat(time){
				// console.log(Number(time));
				// console.log(timeUtil.getFormatTime(Number(time)));
				// console.log(timeUtil.timeShowFormat(time));
				// return timeUtil.timeShowFormat(timeUtil.getFormatTime(Number(time)));
				return timeUtil.timeShowFormat(time);
			},
		}
    }
</script>

<style>
	.div5{
		padding: 3px 5px;
		position: absolute;
		right: 10px;
		top: 24px;
	}
	.box{
		width: 20px; 
		height: 20px;
		border-radius: 50%;
	}
	.tabs1{
		width: 300px;
		height: 44px;
		margin: 0 auto; 
		margin-bottom: 10px;
		
	}
	/deep/ .image{
		float: left;
		margin: 0 0 0 20px;
	}
	.div1{
		width: 100%;
		height: 50px;
		margin: 18px 0;
	}
	.div2{
		width: 80%;
		height: 100%;
		float: right;
		overflow: hidden;
	}
	.div3{
		width: 70%;
		height: 100%;
		float: left;
	}
	.p1{
		margin-top: 4px;
		font-weight: 500;
		font-size: 14px;
	}
	.p2{
		width: 100%;
		height: 20px;
		margin-top: 4px;
		font-size: 12px;
		color: rgb(153, 153, 153);
		overflow: hidden;
	}
	.p3{
		margin-top: 4px;
		font-size: 12px;
		float: right;
		color: rgb(153, 153, 153);
		margin-right: 10px;
	}
	.div4{
		width: 30%;
		height: 100%;
		float: right;
		position: relative;
	}
</style>